<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>@mouseover</title>
		<style>
			#div {
				background-color: red;
				width: 300px;
				height: 300px;
			}
		</style>
		<script src="../js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<div @mouseover="fun1()" id="div">
				<textarea @mouseover="fun2($event)">这是一个文件域</textarea>
			</div>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el: '#app',
			methods: {
			    fun1: function() {
					alert('div');
				},
				fun2: function(event) {
			        alert("textarea");
			        event.stopPropagation();
				}
			}
		});
        /**
		 * 想要阻止事件的默认行为或者说停止事件向上传播，可以使用vue事件的属性
		 * 比如@mouseover.stop就可以停止事件向上传播
         */
	</script>

</html>